<template>
  <form
      class="data-form-container"
      id="dataForm"
      @submit.prevent="handleSubmit"
      ref="form"
  >
    <div class="form-item">
      <div class="input-area">
        <input
            maxlength="40"
            placeholder="昵称"
            type="text"
            v-model="formData.nickname"
        >
        <span class="tip">{{ formData.nickname.length }}/40</span>
      </div>
      <div class="error">{{ error.nickname }}</div>
    </div>
    <div class="form-item">
      <div class="text-area">
        <textarea
            maxlength="300"
            placeholder="请输入内容"
            v-model="formData.content"
        >
        </textarea><span class="tip">{{ formData.content.length }}/300</span>
      </div>
      <div class="error">{{ error.content }}</div>
    </div>
    <div class="form-item">
      <div class="submit-area">
        <button :disabled="isSubmiting">{{ isSubmiting ? "提交中..." : "提交" }}</button>
      </div>
    </div>
  </form>
</template>

<script>

export default {
  name: "DataForm",
  data() {
    return {
      formData: {
        nickname: "",
        content: "",
      },
      error: {
        nickname: "",
        content: "",
      },
      isSubmiting: false,
    };
  },
  methods: {
    handleSubmit() {
      // 验证数据
      this.error.nickname = this.formData.nickname ? "" : "请填写昵称";
      this.error.content = this.formData.content ? "" : "请填写内容"
      if (this.error.content || this.error.nickname) {
        return null;
      }
      this.isSubmiting = true;
      // 抛出事件
      this.$emit("submit", this.formData, (msg) => {
        this.$messageBox(
            msg,
            "success",
            this.$refs.form,
            1500,
            () => {
              this.isSubmiting = false;
              this.formData.content = "";
              this.formData.nickname = "";
            }
        )
      });
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";

.data-form-container {
  margin-bottom: 20px;
  overflow: hidden;
  border-bottom: 2px solid green;
}

.form-item {
  margin-bottom: 20px;

  .error {
    font-size: 14px;
    color: @danger;
    margin-top: 6px;
    height: 20px;
    line-height: 20px;
    padding-left: 9px;
  }
}

.input-area {
  width: 60%;
  position: relative;

  input {
    width: 100%;
    height: 40px;
    padding: 0 15px;
    box-sizing: border-box;
    border: 1px dashed @gray;
    outline: none;
    border-radius: 8px;
    font-size: 14px;

    &:focus {
      border-color: @primary;
    }
  }
}

.text-area {
  position: relative;

  textarea {
    display: block;
    width: 100%;
    height: 130px;
    resize: none;
    padding: 8px 15px;
    box-sizing: border-box;
    border: 1px dashed @gray;
    outline: none;
    border-radius: 8px;
    font-size: 14px;

    &:focus {
      border-color: @primary;
    }
  }
}

button {
  position: relative;
  cursor: pointer;
  border: none;
  outline: none;
  width: 100px;
  height: 34px;
  color: #fff;
  border-radius: 4px;
  background: @primary;

  &:hover {
    background: darken(@primary, 10%);
  }

  &:disabled {
    background: lighten(@primary, 20%);
    cursor: not-allowed;
  }
}

.tip {
  position: absolute;
  bottom: 3px;
  right: 9px;
  font-size: 12px;
  color: @gray;
}

</style>
